<template>
  <div :class="{ question_move: disabled }">
    <quill-editor
      contentType="html"
      class="editor"
      :style="{ height: height, minHeight: '150px', maxHeight: '700px' }"
      :options="editorOption"
      :content="contents"
      @textChange="onEditorChange($event)"
      v-model="changeContent"
      ref="quillEditorRef"
    ></quill-editor>
  </div>
</template>
<script>
// quill富文本框
import { QuillEditor } from '@vueup/vue-quill'
import ImageResize from 'quill-image-resize-module'
import * as Quill from 'quill'

Quill.register('modules/imageResize', ImageResize)
import '@vueup/vue-quill/dist/vue-quill.snow.css'
var sizes = ['12px', '13px', '14px', '15px', '16px', '17px', '18px', '19px', '20px', '21px', '22px', '23px', '24px', '25px', '26px', '27px', '28px']
var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'sans-serif']
var Font = Quill.import('formats/font')
Font.whitelist = fonts
Quill.register(Font, true)
var Size = Quill.import('formats/size')
Size.whitelist = sizes
var toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  [{ size: sizes }], // custom dropdown
  ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
  [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  // [{ direction: "rtl" }], // 文本方向-----[{'direction': 'rtl'}]
  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
  [{ header: [false, 6, 5, 4, 3, 2, 1] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ font: [false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'sans-serif'] }],
  // [{ align: [] }],
  ['clean'], // 清除文本格式-----['clean']
  ['image'], // 链接、图片、视频-----['link', 'image', 'video']
]

export default {
  components: {
    QuillEditor,
  },
  // props: ["content", "height", "toolOptions", "disabled"],
  props: {
    content: {
      type: String,
      default: '',
    },
    height: {
      type: String,
      default: 'auto',
    },
    toolOptions: {
      type: Array,
      default: () => {
        return toolbarOptions
      },
    },
    disabled: {
      type: Boolean,
    },
  },
  data() {
    return {
      changeContent: '',
      contents: '',
      loadInd: 1,
      editorOption: {
        placeholder: '请输入内容',
        theme: 'snow',
        modules: {
          toolbar: this.toolOptions || toolbarOptions,
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white',
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar'],
          },
        },
      },
    }
  },
  watch: {
    content(newVal) {
      this.contents = newVal
    },
  },
  mounted() {
    this.contents = this.content
  },
  methods: {
    setContent(text) {
      this.$refs.quillEditorRef.setHTML(text)
    },
    onEditorChange() {
      this.$emit('changeText', {
        content: this.$refs.quillEditorRef.getHTML(),
        text: this.$refs.quillEditorRef.getText(),
      })
    },
  },
}
</script>

<style lang="scss">
.question_move {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.01);
  }
}
.ql-align-center {
  text-align: center;
}
.ql-align-right {
  text-align: right;
}
.ql-align-left {
  text-align: left;
}
.ql-toolbar.ql-snow {
  background-color: #ecf0f1;
}
.ql-toolbar.ql-snow .ql-formats {
  margin-right: 0 !important;
}
.ql-toolbar.ql-snow .ql-picker-options {
  border: none !important;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  background-color: #f6f6f6 !important;
}
.ql-toolbar.ql-snow {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid #ccc;
}
.ql-container.ql-snow {
  border: none;
  img {
    max-width: 100%;
    max-height: 100%;
  }
}
.ql-snow .ql-icon-picker .ql-picker-options {
  padding: 0 !important;
}
.editorBox {
  max-width: 430px;
  transform: translateY(-20px);
}
.quill-editor {
  padding: 0;
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: transparent !important;
  background-color: rgba(165, 161, 161, 0.1);
}
.editor {
  display: flex;
  line-height: normal !important;
  // height: 200px;
}
.ql-editor {
  height: auto;
  width: 100%;
  flex: 1;
}
.ql-snow .ql-tooltip[data-mode='link']::before {
  content: '请输入链接地址:';
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  content: '保存';
  padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode='video']::before {
  content: '请输入视频地址:';
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: '文本' !important;
  font-size: 1em;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: '标题1' !important;
  font-size: 1em;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: '标题2' !important;
  font-size: 1em;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: '标题3' !important;
  font-size: 1em;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: '标题4' !important;
  font-size: 1em;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: '标题5' !important;
  font-size: 1em;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: '标题6' !important;
  font-size: 1em;
}

// .ql-snow .ql-picker.ql-font .ql-picker-label::before,
// .ql-snow .ql-picker.ql-font .ql-picker-item::before {
//   content: '标准字体';
// }
// .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
// .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
//   content: '衬线字体';
// }
// .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
// .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
//   content: '等宽字体';
// }
/* 字号设置 */
/* 默认字号 */
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: '12px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before {
  content: '12px';
  /* font-size: 12px; */
}
.ql-size-12px {
  font-size: 12px !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='13px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='13px']::before {
  content: '13px';
  /* font-size: 13px; */
}
.ql-size-13px {
  font-size: 13px !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before {
  content: '14px';
  /* font-size: 14px; */
}
.ql-size-14px {
  font-size: 14px !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='15px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='15px']::before {
  content: '15px';
  /* font-size: 15px; */
}
.ql-size-15px {
  font-size: 15px !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before {
  content: '16px';
  /* font-size: 16px; */
}
.ql-size-16px {
  font-size: 16px !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='17px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='17px']::before {
  content: '17px';
  /* font-size: 17px; */
}
.ql-size-17px {
  font-size: 17px !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='18px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='18px']::before {
  content: '18px';
  /* font-size: 18px; */
}
.ql-size-18px {
  font-size: 18px !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='19px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='19px']::before {
  content: '19px';
  /* font-size: 19px; */
}
.ql-size-19px {
  font-size: 19px !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='20px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='20px']::before {
  content: '20px';
  /* font-size: 20px; */
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='21px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='21px']::before {
  content: '21px';
  /* font-size: 21px; */
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='22px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='22px']::before {
  content: '22px';
  /* font-size: 22px; */
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='23px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='23px']::before {
  content: '23px';
  /* font-size: 23px; */
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before {
  content: '24px';
  /* font-size: 24px; */
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='25px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='25px']::before {
  content: '25px';
  /* font-size: 25px; */
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='26px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='26px']::before {
  content: '26px';
  /* font-size: 26px; */
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='27px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='27px']::before {
  content: '27px';
  /* font-size: 27px; */
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='28px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='28px']::before {
  content: '28px';
  /* font-size: 28px; */
}
.ql-size-20px {
  font-size: 20px !important;
}
// 字体
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: '标准字体' !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
  content: '衬线字体' !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
  content: '等宽字体' !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='SimSun']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='SimSun']::before {
  content: '宋体' !important;
  font-family: 'SimSun';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='SimHei']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='SimHei']::before {
  content: '黑体' !important;
  font-family: 'SimHei';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Microsoft-YaHei']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Microsoft-YaHei']::before {
  content: '微软雅黑' !important;
  font-family: 'Microsoft YaHei';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='KaiTi']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='KaiTi']::before {
  content: '楷体' !important;
  font-family: 'KaiTi';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='FangSong']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='FangSong']::before {
  content: '仿宋' !important;
  font-family: 'FangSong';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Arial']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Arial']::before {
  content: 'Arial' !important;
  font-family: 'Arial';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Times-New-Roman']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Times-New-Roman']::before {
  content: 'Times New Roman' !important;
  font-family: 'Times New Roman';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='sans-serif']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='sans-serif']::before {
  content: 'sans-serif' !important;
  font-family: 'sans-serif';
}

.ql-font-SimSun {
  font-family: 'SimSun';
}

.ql-font-SimHei {
  font-family: 'SimHei';
}

.ql-font-Microsoft-YaHei {
  font-family: 'Microsoft YaHei';
}

.ql-font-KaiTi {
  font-family: 'KaiTi';
}

.ql-font-FangSong {
  font-family: 'FangSong';
}

.ql-font-Arial {
  font-family: 'Arial';
}

.ql-font-Times-New-Roman {
  font-family: 'Times New Roman';
}

.ql-font-sans-serif {
  font-family: 'sans-serif';
}
</style>

